<template>
  <div class="panel-tab__content">
    <el-form size="mini" label-width="80px" @submit.native.prevent>
      <el-form-item label="按钮权限">
        <el-select multiple v-model="form.btn_auth_arr" @change="updateElement">
          <el-option label="驳回按钮" value="1" />
          <!-- <el-option label="转办按钮" value="2" />
          <el-option label="加签按钮" value="3" />
          <el-option label="强制结束按钮" value="4" />
          <el-option label="转阅按钮" value="5" />
          <el-option label="打印按钮" value="6" />
          <el-option label="撤办按钮（下一节点）" value="7" />
          <el-option label="收回按钮（任何节点）" value="8" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="审批跳过">
        <el-select v-model="form.skip_same_approve" @change="updateElement">
          <el-option label="不跳过同审批人" value="1" />
          <el-option label="跳过同审批人" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="节点类型" v-show="false">
        <el-select v-model="form.node_type" @change="updateElement">
          <el-option label="普通任务" value="1" />
          <el-option label="自动任务" value="2" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="待阅设置">
        <el-select v-model="form.open_read" @change="updateElement">
          <el-option label="开启待阅" value="1" />
          <el-option label="关闭待阅" value="2" />
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { settingInfo, save } from '@/api/activiti/nodesetting'
export default {
  name: 'ElementOtherConfig',
  props: {
    id: String,
  },
  data () {
    return {
      form: {
        id: '',
        process_id: '',
        node_id: '',
        node_name: '',
        btn_auth: '',
        skip_same_approve: '1',
        node_type: '1',
        open_read: '',
        btn_auth_arr: [],
      },
      elementType: '',
    }
  },
  watch: {
    id: {
      immediate: true,
      handler (val) {
        val && val.length && this.$nextTick(() => this.resetFormList())
      },
    },
  },
  methods: {
    resetFormList () {
      this.bpmnELement = window.bpmnInstances.bpmnElement
      console.log('5555cb', this.bpmnELement)
      this.elementType = this.bpmnELement.type.split(':')[1]
      this.form.node_id = this.bpmnELement.id
      this.form.process_id = this.bpmnELement.parent.id
      if (this.bpmnELement.businessObject.name != undefined) {
        this.form.node_name = this.bpmnELement.businessObject.name
      }

      settingInfo({ process_id: this.form.process_id, node_id: this.form.node_id }).then(
        (response) => {
          const data = response.data.data

          console.log('5555cb33', data)
          if (data != null) {
            this.form.id = data.id
            this.form.btn_auth = data.btn_auth
            this.form.skip_same_approve = data.skip_same_approve
            this.form.node_type = data.node_type
            this.form.open_read = data.open_read
            if (data.btn_auth) {
            this.form.btn_auth_arr = data.btn_auth.split(',')
            } else {
               this.form.btn_auth_arr = ''
            }

           // console.log(this.form)
          } else {
            this.form.id = ''
            this.form.btn_auth = ''
            this.form.skip_same_approve = '1'
            this.form.node_type = '1'
            this.form.open_read = ''
            this.form.btn_auth_arr = []
          }
        },
      )
    },
    updateElement () {
      this.form.btn_auth = this.form.btn_auth_arr.join(',')
      save(this.form).then(
        (response) => {
          const data = response.data.data
          this.form.id = data.id
        },
      )
    },
  },
  beforeDestroy () {
    this.bpmnElement = null
  },
}
</script>
